<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadAddress"
      :headers="upload.headers"
      :on-success="uploadSuccess"
      :on-error="uploadErr"
      :file-list="upload.fileList"
      :auto-upload="true"
      :show-file-list="false"
      :accept="'.pdf,.jpg,.png,.jpeg'"
      :disabled="authDisabled"
      multiple
    >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-document"
        :disabled="authDisabled"
        >点击上传</el-button
      >
    </el-upload>
    <el-link type="info" class="font-style"
      >点击文件可预览，只能上传.pdf,.jpg,.png,.jpeg</el-link
    >
    <div class="show-file-list">
      <div
        v-for="item in saveUploadFileList"
        :key="item.fileId"
        class="file-item"
      >
        <el-link class="font-style"
          ><a :href="item.url" target="_blank">{{ item.fileName }}</a></el-link
        >
        <span class="file-btns">
          <el-button
            type="text"
            icon="el-icon-download"
            size="mini"
            @click="downloadFileBtnClick(item)"
          ></el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            :disabled="authDisabled"
            size="mini"
            @click="fileRemove(item)"
          ></el-button>
        </span>
      </div>
    </div>
    <el-button
      v-if="authDisabled"
      type="primary"
      icon="el-icon-download"
      @click="downloadAllFile"
      size="small"
      >批量下载</el-button
    >
  </div>
</template>

<script>
import { encode, decode } from "js-base64";
import { getToken } from "@/utils/auth";
import {
  delFile,
  downloadFile,
  queryFileByProjectId,
} from "@/api/archives/purchase-file";
export default {
  name: "AuditUpload",
  props: {
    uploadAddress: {
      type: String,
      default: "",
    },
    authDisabled: {
      type: Boolean,
      default: false,
    },
    isopen: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      required: true,
    },
    projectId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      upload: {
        uploadAddress: "",
        headers: { Authorization: "Bearer " + getToken() },
        fileList: [],
        projectId: {},
        fileIds: [],
      },
      saveUploadFileList: [],
    };
  },
  watch: {
    isopen(value, oldVal) {
      // console.log(value);
      if (!value) {
        this.$refs.upload.clearFiles();
        this.saveUploadFileList = [];
      }
    },
  },
  computed: {
    isAdminUser() {
      const roles = this.$store.state.user.roles;
      return roles.includes("admin") || roles.includes("zong_guanliyuan");
    },
  },
  mounted() {
    // console.log("调用了生命周期函数");
    /* setTimeout(() => {
      this.queryFile();
    }, 500); */
  },
  destroyed() {
    // console.log("销毁了");
  },
  methods: {
    uploadSuccess(res, file, fileList) {
      // console.log("res", res);
      // console.log("file",file);
      // console.log("fileList",fileList);
      this.$bus.$emit("fileUploadSuccess", res.data.fileName, this.type);
      this.saveUploadFileList.push({
        fileName: res.data.fileName,
        url: decode(res.data.url),
        fileId: res.data.fileId,
      });
      // console.log(this.$refs.upload.$parent)
      // console.log(this.saveUploadFileList);
      // this.upload.fileIds.push(res.auditFile.fileId);
    },
    uploadErr(err, file, fileList) {
      // console.log("err", err);
    },
    fileRemove(file) {
      // console.log("删除前",this.saveUploadFileList);
      delFile(file.fileId).then((res) => {
        // console.log(res);
      });
      this.saveUploadFileList = this.saveUploadFileList.filter(
        (item) => item.fileId !== file.fileId
      );
      // console.log("删除后",this.saveUploadFileList);
    },
    downloadFileBtnClick(item) {
      // console.log(item);
      const fileType =
        item.fileName.split(".")[item.fileName.split(".").length - 1];
      this.download(
        "/archives/buyFiles/download/" + item.fileId,
        {},
        `${new Date().getTime()}.${fileType}`
      );
    },
    // 查询上传的文件
    queryFile(projectId,type) {
      // console.log(projectId,this.type);
      queryFileByProjectId(projectId, type).then((res) => {
        // console.log(res);
        this.$bus.$emit(
          "fileUploadSuccess",
          res.archivesFileList[0] && res.archivesFileList[0].fileName,
          this.type
        );
        this.saveUploadFileList = res.archivesFileList.map((item) => {
          return {
            fileName: item.fileName,
            url: decode(item.url),
            fileId: item.fileId,
          };
        });
      });
    },
    downloadAllFile() {
      // console.log(this.currentProjectId);
      this.$download.zip(
        `/archives/buyFiles/downloadAll/${this.projectId}/${this.type}`,
        `${new Date().getTime()}`
      );
    },
  },
};
</script>

<style scoped>
.font-style {
  font-size: 12px;
  margin-left: 5px;
}
.file-btns {
  position: absolute;
  right: 5px;
}
.show-file-list {
  position: relative;
  width: 83.5%;
  /* border: 1px solid #ccc; */
}
</style>
